<!-- html -->
<template>
  <h2 class="h2">{{ title1 }}</h2>
  <span class="span3">父组件</span>
  <br>
  <button @click="changeChildText($refs)">修改所有子组件内容</button>
  <hr class="hr1">
  <span class="span3">子组件1</span>
  <br>
  <exposeTest2Child1 ref="child1" />
  <br>
  <span class="span3">子组件2</span>
  <br>
  <exposeTest2Child2 ref="child2" />
  <hr class="hr2">
  <h2 class="h2">{{ title2 }}</h2>
  <span class="span3">父组件</span>
  <br>
  <span class="span2">内容：{{ text }}</span>
  <button class="button1" @click="changeText">修改内容</button>
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <exposeTest2Child3 />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'exposeTest2'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
import exposeTest2Child1 from '@/components/componenttransmit/ExposeTest2Child1.vue'
import exposeTest2Child2 from '@/components/componenttransmit/ExposeTest2Child2.vue'
import exposeTest2Child3 from '@/components/componenttransmit/ExposeTest2Child3.vue'
//数据
let title1 = ref('expose + ref + $refs + $parent，父组件=>子组件')
let title2 = ref('expose + $refs + $parent，父组件<=子组件')
let text = ref('hello')
//方法
//向外部提供属性
defineExpose({ text })
function changeText() {
  text.value += '-'
}
function changeChildText(refs: { [key: string]: any }) {
  for (let key in refs) {
    refs[key].text += '-'
  }
}
</script>

<!-- 样式 -->
<style scoped></style>